<template>
  <div ref="spineContainerRef"></div>
</template>

<script setup>
import { onMounted, ref, watch, nextTick } from "vue";
import spine from "./lib/spine-player/spine-player";

// const { width = "200px", height = "200px" } = defineProps({
//   width: string,
//   height: string,
// });

const spineContainerRef = ref(null);

const spinePlayerInstance = ref(null);

function updateSpinePlayerView() {
  if (!spinePlayerInstance.value) return;
  spinePlayerInstance.value.canvas.style.width = "606px";
  spinePlayerInstance.value.canvas.style.height = "902px";
  spinePlayerInstance.value.playerControls.style.display = "none";
}

// watch(() => [width, height], updateSpinePlayerView);

onMounted(() => {
  spinePlayerInstance.value = new spine.SpinePlayer(spineContainerRef.value, {
    jsonUrl: "/pixi/RED_ENVELOPE/RED_ENVELOPE.json",
    atlasUrl: "/pixi/RED_ENVELOPE/RED_ENVELOPE.atlas",
    showControls: false,
    premultipliedAlpha: true,
    backgroundColor: "#00000000",
    alpha: true,
    defaultMix: 1,
    success: (player) => {
      spinePlayerInstance.value = player;
      setTimeout(() => {
        player.paused = true;
      }, 3500);

      //updateSpinePlayerView()
    },
  });
  updateSpinePlayerView();
});
</script>
